<template>
  <div>
    <img :src="imgurl" :style="styles" :class="classname" alt="" @click.stop="viewPicture()">
    <imgDialog ref="imgDialog" :imgs="imgs"/>
  </div>
</template>
<script>
import imgDialog from './modules/imgDialog'

export default {
  name: 'ImgItem',
  components: { imgDialog },
  props: {
    imgurl: {
      type: String,
      required: true
    },
    styles: {
      type: String,
      default: ''
    },
    classname: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgs: [],
      dialog: false
    }
  },
  methods: {
    viewPicture() {
      this.imgs = [{ url: this.imgurl }]
      this.$refs.imgDialog.dialog = true
    }
  }
}
</script>
<style scoped>
</style>
